import Scene from "../Scene";
import { TLayout, TButton, MoveInfo } from "../SceneControl";
import MainPageScene from "./MainPageScene";

const { ccclass, property } = cc._decorator;

@ccclass
export default class CardPanelScene extends MainPageScene {

    upLayout: TLayout;
    rightLayout: TLayout;
    scroll: cc.ScrollView;
    acquire: cc.Node;
    noacquire: cc.Node;

    protected onEnable(): void {
        this.scroll = cc.find("scrollView", this.node).getComponent(cc.ScrollView);

        this.acquire = cc.find("scrollView/view/content/acquire/layout", this.node);
        this.noacquire = cc.find("scrollView/view/content/noacquire/layout", this.node);

        super.onEnable();

        let rightLayout = this.getRightLayout();
        this.tscene.addLayout(rightLayout, { row: 0, line: 1 });

        this.scheduleOnce(this.refreshLeft, 0.1);
        this.scheduleOnce(this.refreshRight, 0.1);
        this.scroll.scrollToTop();

        this.acquire.on(cc.Node.EventType.CHILD_ADDED, this.refreshRight, this);
        this.acquire.on(cc.Node.EventType.CHILD_REMOVED, this.refreshRight, this);
        this.noacquire.on(cc.Node.EventType.CHILD_ADDED, this.refreshRight, this);
        this.noacquire.on(cc.Node.EventType.CHILD_REMOVED, this.refreshRight, this);
    }

    protected onDisable(): void {
        super.onDisable();
        this.acquire.off(cc.Node.EventType.CHILD_ADDED, this.refreshRight, this);
        this.acquire.off(cc.Node.EventType.CHILD_REMOVED, this.refreshRight, this);
        this.noacquire.off(cc.Node.EventType.CHILD_ADDED, this.refreshRight, this);
        this.noacquire.off(cc.Node.EventType.CHILD_REMOVED, this.refreshRight, this);
    }

    getUpLayout(): TLayout {
        this.upLayout = new TLayout(this.node.name);
        let btns = this.btns;
        this.upLayout.buttonList = btns;
        this.upLayout.site.row = btns.length - 1;
        return this.upLayout;
    }

    getRightLayout(): TLayout {
        this.rightLayout = new TLayout(this.node.name);
        let btns = this.rightBtns;
        this.rightLayout.buttonList = btns;
        this.rightLayout.site.row = 0;
        return this.rightLayout;
    }

    refreshLeft() {
        this.scheduleOnce(() => {
            this.upLayout.buttonList = this.btns;
            this.tscene.apply();
        }, 0.1);
    }

    refreshRight() {
        this.scheduleOnce(() => {
            this.rightLayout.buttonList = this.rightBtns;
            this.tscene.apply();
        }, 0.1);
    }

    get btns() {
        let btnNodes = cc.find("battle/layout", this.node).children;
        let btns = Scene.sortNodesIntoGrid(btnNodes, 150, true) as TButton[][];
        return btns;
    }

    get rightBtns(): TButton[][] {
        let btnNodes = this.scroll.content.getComponentsInChildren(cc.Button).map((item) => item.node);
        let btns = Scene.sortNodesIntoGrid(btnNodes, 150, true) as TButton[][];
        btns.forEach((item) => {
            item.forEach((btn) => {
                btn.addBeforeFingerInEvent(this.fingerIn.bind(this));
            })
        })
        return btns;
    }

    fingerIn(moveInfo: MoveInfo) {
        this.scroll.scrollToPercentVertical(1 - (moveInfo.targetLayout.site.row / (moveInfo.targetLayout.buttonList.length - 1)), 0.2)
    }
}
